<!-- 重疾-必选责任列表 -->
<template>
  <a-modal :title="mdl.title" destroyOnClose :visible="mdl.visibleDutySeriousMust" maskClosable width="1200px"
    @cancel="$emit('done')" @ok="$emit('done')">
    <el-card class="box-card">
      <div slot="header" class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :span="12">
              <a-button icon="plus" style="margin-right: 8px" type="primary" @click="handleAdd">新建</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="是否必选" prop="dutySerious.isMust" align="center">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.dutySerious.isMust) === 0">可选</el-tag>
            <el-tag v-else-if="parseInt(scope.row.dutySerious.isMust) === 1">必选</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="计划书名称" prop="dutySerious.dutyName" align="center" />
        <el-table-column label="费率表名称" prop="dutySerious.recordName" align="center" />
        <el-table-column label="产品对比名称" prop="dutySerious.compareName" align="center" />
        <!-- <el-table-column label="责任编码" prop="dutySerious.dutySn" align="center" /> -->
        
        <el-table-column label="是否分组" prop="dutySerious.isGroup" align="center">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.dutySerious.isGroup) === 0">否</el-tag>
            <el-tag v-else-if="parseInt(scope.row.dutySerious.isGroup) === 1">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="赔付规则" prop="dutySerious.dutyRule" align="center" />
        <el-table-column label="备注信息" prop="dutySerious.dutyMemo" align="center" />
        <el-table-column label="赔付基数是否为保额" prop="dutySerious.isBasePay" align="center">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.dutySerious.isBasePay) === 0">否</el-tag>
            <el-tag v-else-if="parseInt(scope.row.dutySerious.isBasePay) === 1">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否需要计算赔付金额" prop="dutySerious.isCalculatePay" align="center">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.dutySerious.isCalculatePay) === 0">否</el-tag>
            <el-tag v-else-if="parseInt(scope.row.dutySerious.isCalculatePay) === 1">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="赔付次数" prop="dutySerious.redressAmount" align="center" />
        <el-table-column label="赔付比例" prop="dutySerious.redressRate" align="center" />
        <el-table-column label="间隔期" prop="dutySerious.dutyInterval" align="center">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.dutySerious.dutyInterval) === 0">否</el-tag>
            <el-tag v-else-if="parseInt(scope.row.dutySerious.dutyInterval) === 1">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="间隔期单位" prop="dutySerious.dutyIntervalUnit" align="center">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.dutySerious.dutyIntervalUnit) === 0">无此项</el-tag>
            <el-tag v-else-if="parseInt(scope.row.dutySerious.dutyIntervalUnit) === 1">年</el-tag>
            <el-tag v-else-if="parseInt(scope.row.dutySerious.dutyIntervalUnit) === 2">天</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="间隔期数量" prop="dutySerious.dutyIntervalAmount" align="center" />
        <el-table-column label="是否限定年龄" prop="dutySerious.dutySexyLimit" align="center">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.dutySerious.dutySexyLimit) === 0">否</el-tag>
            <el-tag v-else-if="parseInt(scope.row.dutySerious.dutySexyLimit) === 1">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="限定起始年龄" prop="dutySerious.dutySexyLimitMin" align="center" />
        <el-table-column label="限定截止年龄" prop="dutySerious.dutySexyLimitMax" align="center" />
        <!-- <el-table-column label="标签" prop="dutySerious.dutyLabel" align="center" /> -->
        <el-table-column label="排序号" prop="dutySerious.sortOrder" align="center" />
        <el-table-column width="180" label="创建时间" prop="dutySerious.createTime" align="center" />
        <el-table-column width="180" label="更新时间" prop="dutySerious.updateTime" align="center" />
        <el-table-column width="150" fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <!-- <el-link :underline="false" type="primary" @click="handleEdit(scope.row)">编辑</el-link> -->
            <el-link :underline="false" type="danger" style="margin-left:10px;"
              @click="handleDelete(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>

      <div style="display: flex;justify-content: flex-end;margin: 20px 0 0;">
        <el-pagination :current-page="queryParam.page" :page-size="queryParam.limit" :page-sizes="[10, 20, 50, 100]"
          :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-card>

    <!-- 新增/编辑 -->
    <duty-serious-must-edit :modal="modal" @done="handleOk"></duty-serious-must-edit>
  </a-modal>
</template>

<script>
  import { listByPage, del } from '@/api/aibao/product/seriousIndemnify'
  import dutySeriousMustEdit from './components/indemnify-duty-serious-must-edit'
  import { Modal } from 'ant-design-vue'

  export default {
    props: {
      productId: {
        type: String,
        default: ''
      },
      productIndemnifyId: {
        type: String,
        default: ''
      },
      mdl: {
        type: Object,
        default: {}
      },
    },
    components: {
      dutySeriousMustEdit
    },
    data() {
      return {
        queryParam: {
          page: 1,
          limit: 10,
          productId: '',
          indemnifyId: ''
        },
        total: 0,
        modal: {
          visible: false, //新增、编辑
          title: '',
          form: {}
        },
        tableData: [],
      }
    },
    methods: {
      query() {
        this.queryParam.page = 1
        this.getTable()
      },
      handleSizeChange(val) {
        this.queryParam.limit = val
        this.getTable()
      },
      handleCurrentChange(val) {
        this.queryParam.page = val
        this.getTable()
      },

      getTable() {
        this.queryParam.productId = this.productId
        this.queryParam.indemnifyId = this.productIndemnifyId
        listByPage(this.queryParam).then(res => {
          this.tableData = res.data.records
          this.total = parseInt(res.data.total)
        }).catch(() => {})
      },

      handleOk() {
        this.modal.form = {}
        this.modal.visible = false
        this.queryParam.page = 1
        this.getTable()
      },

      handleAdd() {
        this.modal.form = {
          productId: this.productId, //产品id
          // companyId: this.mdl.companyId,
          indemnifyId: this.productIndemnifyId, //保障期id
          id: '', //必选责任id
        }
        this.modal.visible = true
        this.modal.title = '新增'
      },

      handleEdit(record) {
        this.modal.form = {
          productId: this.productId, //产品id
          // productIndemnifyId: this.mdl.productIndemnifyId, //保障期id
          // companyId: record.companyId,
          id: record.id, //必选责任id
        }
        let params = ['dutyName', 'isMust', 'isGroup', 'dutyRule', 'dutyMemo', 'isBasePay', 'isCalculatePay',
          'redressAmount', 'redressRate', 'dutyInterval', 'dutyIntervalUnit', 'dutyIntervalAmount', 'dutySexyLimit',
          'dutySexyLimitMin', 'dutySexyLimitMax', 'sortOrder', 'recordName', 'dutySn'
        ]
        params.forEach(v => { this.modal.form[v] = record[v] })
        this.modal.visible = true
        this.modal.title = '编辑'
      },
      handleDelete(record) {
        // 删除，2025年1月18日17:17:04
        Modal.confirm({
          title: '确认要删除？',
          onOk: () => {
            del([record.id]).then(res => {
              this.queryParam.page = 1
              this.getTable()
              this.$message.success('删除成功')
            }).catch(() => {})
          }
        })        
      }
    },
    watch: {
      mdl: {
        handler(value) {
          if (value.visibleDutySeriousMust) {
            this.queryParam.productId = this.productId
            this.queryParam.productIndemnifyId = this.productIndemnifyId
            this.getTable()
          }
        },
        deep: true
      }
    },
  }
</script>

<style lang="less" scoped>
  .view-video {
    position: relative;

    .close {
      position: absolute;
      right: 15px;
      top: 0;
      cursor: pointer;
    }
  }

  /deep/.ant-modal-body {
    max-height: calc(80vh - 150px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 6px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }

    &::-webkit-scrollbar-thumb {
      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #e3e3e6;
      border-radius: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
    }
  }
</style>